<template>
  <q-page class="q-pa-md">
    <div class="row items-center">
      <div class="q-pb-md text-h5">
        布局
        <span class="text-subtitle1">本页展示布局与对齐</span>
      </div>
    </div>
    <div class="shadow-3 q-pa-md">
      <p class="text-h6">横向普通浮动布局</p>
      <p>给容器加上<code>row</code>样式，容器内部的块元素默认就不占满一行，而是一个个有序“排”进去。</p>

      <div class="shadow-1 q-mb-sm q-pa-sm row items-center">
        <q-toggle v-model="isHorizontal" color="primary" label="主轴横向" class="q-mr-md" />
        <span class="q-mr-xs">沿着主轴</span>
        <q-select dense options-dense square transition-show="none" transition-hide="none" filled
          v-model="alongAxisType" :options="alongAxisTypes" style="width:180px" class="q-mr-md"></q-select>
        <span class="q-mr-xs">垂直主轴</span>
        <q-select dense options-dense square transition-show="none" transition-hide="none" filled
          v-model="perpendicularAxisType" :options="perpendicularAxisTypes" style="width:180px"
          class="q-mr-md"></q-select>
        <span class="q-mr-xs">元素数目</span>
        <!--<q-input dense v-model="elementAmount" class="q-mr-md" input-class="text-center" style="width:50px" />-->
        <q-select dense options-dense square transition-show="none" transition-hide="none" filled
          v-model="elementAmount" :options="elementAmountListForSelect" style="width:80px" class="q-mr-md"
          @update:model-value="generateElementData"></q-select>
      </div>

      <div class="row shadow-1">
        <div
          :class="'col-xs-12 col-md-6 bg-blue-2 demo-container ' + (isHorizontal?'row':'column') + ' ' + alongAxisType + ' '+ perpendicularAxisType">
          <div :class="'text-white column items-center justify-center ' + bgColors[idx]"
            v-for="(colInfo, idx) in arrColInfo" :key="idx" :style="colInfo.size">
            <div>{{colInfo.size.width + ' ' + colInfo.size.height}}</div>
          </div>
        </div>
        <div
          :class="'col-xs-12 col-md-6 bg-green-2 demo-container ' + (isHorizontal?'row':'column') + ' ' + alongAxisType + ' '+ perpendicularAxisType">
          <div :class="'col text-white column items-center justify-center ' + bgColors[idx]"
            v-for="(colInfo, idx) in arrColInfo" :key="idx">
            <div>.col</div>
          </div>
        </div>
        <div
          :class="'col-xs-12 col-md-6 bg-yellow-2 demo-container ' + (isHorizontal?'row':'column') + ' ' + alongAxisType + ' '+ perpendicularAxisType">
          <div :class="'text-white column items-center justify-center col-'+colInfo.colNum + ' ' + bgColors[idx]"
            v-for="(colInfo, idx) in arrColInfo" :key="idx">
            <div>{{'.col-' + colInfo.colNum}}</div>
          </div>
        </div>
        <div
          :class="'col-xs-12 col-md-6 bg-purple-2 demo-container ' + (isHorizontal?'row':'column') + ' ' + alongAxisType + ' '+ perpendicularAxisType">
          <div :class="'text-white column items-center justify-center col-md-'+colInfo.colNum + ' ' + bgColors[idx]"
            v-for="(colInfo, idx) in arrColInfo" :key="idx">
            <div>{{'.col-md-' + colInfo.colNum}}</div>
          </div>
        </div>
      </div>
      <div class="row q-mt-md">
        <q-banner class="bg-grey-3" rounded>
          <template v-slot:avatar>
            <q-icon color="info" name="info" size="30px" />
          </template>
          <code>col-md-1</code>表示当页面宽度>=md的时候让<code>col-1</code>生效
        </q-banner>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'Layout',
}
</script>
<script lang="ts" setup>

import {reactive, ref} from 'vue'

let alongAxisType = ref('justify-start')
const alongAxisTypes = [
  'justify-start',
  'justify-end',
  'justify-center',
  'justify-between',
  'justify-around',
  'justify-evenly',
]
let perpendicularAxisType = ref('items-start')
const perpendicularAxisTypes = [
  'items-start',
  'items-end',
  'items-center',
  'items-stretch',
  'items-baseline',
]
const bgColors = [
  'bg-blue-grey-10',
  'bg-red-10',
  'bg-primary',
  'bg-green-10',
  'bg-pink-10',
  'bg-light-green-10',
  'bg-purple-10',
  'bg-lime-10',
  'bg-deep-purple-10',
  'bg-yellow-10',
  'bg-indigo-10',
  'bg-amber-10',
  'bg-blue-10',
  'bg-orange-10',
  'bg-light-blue-10',
  'bg-deep-orange-10',
  'bg-cyan-10',
  'bg-brown-10',
  'bg-teal-10',
  'bg-grey-10',
]
let elementAmountListForSelect = [...Array(21).keys()].slice(1)
let elementAmount = ref(6)
let isHorizontal = ref(true)

let arrColInfo: { size: { width: string, height: string }, colNum: number }[] = reactive([])

const generateElementData = function () {
  arrColInfo.splice(0, arrColInfo.length)
  for (let i = 0; i < elementAmount.value; i++) {
    arrColInfo.push({
      size: {
        width: 100 + Math.floor(Math.random() * 100) + 'px',
        height: 66 + Math.floor(Math.random() * 60) + 'px',
      },
      colNum: Math.floor(Math.random() * Math.random() * 12) + 1,
    })
  }
}

generateElementData()

</script>

<style lang="scss" scoped>
.demo-container {
  min-height: 320px;
}
</style>
